【Day8】用jQuery開張商店

第 12 屆 iThome 鐵人賽

DAY 8

自我挑戰組

每天一份前端小作品系列第 8 篇

12th鐵人賽

hinolin0309

2020-09-20 22:25:08

751 瀏覽

分享至

本日小作品：
https://codepen.io/linchinhsuan/pen/wvGQwve

練習重點摘要：

$(".open img").delay(1000).fadeIn(400);
.delay(1000)可以讓動畫效果延遲括號內的秒數執行，所以當網頁載入完成之後，要再過一秒才會有淡入效果。這裡的用意除了練習.delay(1000)的用法之外，還有就是不要讓使用者還沒有搞清楚狀況圖片就已經出現了。

align-self: flex-end;
食物圖片以flex排版，方向設定為column，此時預設的次軸是靠畫面的左邊，透過在子物件寫align-self: flex-end;可以讓子物件單獨對齊次軸尾。

position: fixed;
常見的蓋版廣告作法，不會隨著畫面捲動而移動，會固定在畫面上某個位置。這裡透過bottom: 0;left: 0;讓廣告固定在畫面的左下角。

e.preventDefault();
在<a href="#">關閉</a>上綁定點擊事件，但原本的<a href="#">關閉</a>有連結到其他地方的效果，為了避免預設行為觸發，就必須加上這行程式碼。

$(".ad").slideUp();
當點擊【關閉】的時候用jQuery動畫將其向下收起。

class="animate__animated animate__backInLeft"
為Animate.css所提供的動畫效果，在<head>載入其CDN之後，只要將對應的class名稱加到所希望的物件上，就會呈現相對應的動畫效果。這裡我針對兩張圖片各加入了一個從左和從右滑出的動畫效果。

－－－

備註：
本小作品使用了Animate.css的動畫
圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是八天，除了jQuery之外，還使用了Animate.css做動畫。
一想到自己已經寫到第八天就覺得不可思議！